<template>
  <div>
    <div class="head">
      <div class="pic">
        <img :src="userInfo.avatar" alt="">
        <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596995088759&di=182198220e1552638559676503369eca&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F19%2F20150319110837_RvzJ4.thumb.700_0.jpeg" alt=""> -->
      </div>
      <div class="name">
        {{userInfo.userName}}
      </div>
    </div>
    <div class="mine-pic">
      <img src="@/assets/img/mine.png" alt="">
    </div>
    <!-- 底部标签栏 -->
    <van-tabbar
      :route="true"
      active-color="#f66"
    >
      <van-tabbar-item to="/home">
        <span>首页</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="home"></van-icon>
        </template>
      </van-tabbar-item>

       <van-tabbar-item to="/cates">
        <span>分类</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="fenlei1"></van-icon>
        </template>
      </van-tabbar-item>

       <van-tabbar-item to="/cart">
        <span>购物车</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="icon-"></van-icon>
        </template>
      </van-tabbar-item>

       <van-tabbar-item to="/mine">
        <span>我的</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="wode01"></van-icon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {}
      // userInfo: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2121278104,33728762&fm=26&gp=0.jpg"
      // userInfo:localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):[]
    }
  },
  created () {
    this.getHis()
    console.log(this.userInfo)
  },
  methods: {
    getHis () {
      this.userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : []
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  width: 100%;
  height: 186px;
  background: url(../.././assets/img/head.png);
  background-size: cover;
  position: relative;
  .pic{
    width: 52px;
    height: 52px;
    background: skyblue;
    // background: #f23030;
    position: absolute;
    left: 15px;
    top: 54px;
    border-radius: 26px;
    overflow: hidden;
    img{
      width: 100%;

    }
  }
  .name{
    position: absolute;
    top: 52px;
    left: 74px;
    background: skyblue;
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    background: #f23030;
  }
}
.mine-pic{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
